<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
<title>LARC Messenger</title>
	<style type="text/css">
		body {
		background-color:black;
		}
		.mensagens {
		vertical-align: bottom;
		width: 85%;
		}
		.usuarios {
		width: 200px;
		vertical-align: bottom;
		}
		.tbMensagensNome {
			width: 200px;
		}
		.tbMensagensMsg {
		}
	</style>
</h:head> 
<body>
	<h:form>
		<a4j:poll render="tbUsuarios" ontimer="#{chatBean.keepAlive()}"
          interval="6000"  />
		<a4j:poll render="tbMensagens" ontimer="#{chatBean.buscaMensagens()}"
          interval="1000" />
	    <rich:panel>
	        <f:facet name="header">
	        LARC Messenger - <h:commandLink value="Logout" action="#{loginBean.logout()}" />
	        </f:facet>
	        <h:panelGrid columns="2" columnClasses="mensagens,usuarios" style="vertical-align:top">
	        	<h:column>
					<rich:dataTable columnClasses="tbMensagensNome,tbMensagensMsg" value="#{chatBean.mensagens}" id="tbMensagens" style="width:100%" var="mensagem" noDataLabel="Nenhuma mensagem">
						<rich:column >
							<f:facet name="header">Usuário</f:facet>
							<h:outputText value="#{mensagem.usuario.nome} (#{mensagem.usuario.id})" />
						</rich:column>
						<rich:column >
							<f:facet name="header">Mensagem</f:facet>
							<h:outputText value="#{mensagem.texto}" />
						</rich:column>
					</rich:dataTable>
				</h:column>
				<h:column>
					<rich:dataTable value="#{chatBean.usuarios}" id="tbUsuarios" var="usuario" style="width:100%;height:100%">
						<rich:column >
							<f:facet name="header">Usuários</f:facet>
							<a4j:commandLink action="#{chatBean.selecionarUsuario(usuario)}" value="#{usuario.nome}" style="font-weight: #{chatBean.usuarioSelecionado.equals(usuario) ? 'bold' : 'normal'}" render="tbUsuarios"  />
						</rich:column>
					</rich:dataTable>
				</h:column>
			</h:panelGrid>
			<br/><br/><br/>
			<h:inputText id="txtMensagem" value="#{chatBean.texto}" style="width:100%" /><a4j:commandButton action="#{chatBean.enviarMensagem}" value="Enviar" render="tbMensagens,tbUsuarios,txtMensagem" oncomplete="window.scrollTo(0, document.body.scrollHeight);"/>
		</rich:panel>
	</h:form>
</body> 
</html>
